<!DOCTYPE html>
<html lang="en">
<head>
     <!-- 页面元信息设置 -->
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>

     <!-- 页面标题 -->
    <title>欢迎登录</title>

      <!-- 外部资源引入 -->
    <link href="/static/css/styles.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            crossorigin="anonymous"></script>
    <script src="/static/js/scripts.js"></script>
</head>

<!-- 自定义样式 -->
<style>
      /* 登录卡片半透明效果 */
    .col-lg-5 {
        opacity: .8;
    }

      /* 设置背景图片并铺满整个区域 */
    .bg-primary {
        background-image: url("https://img0.baidu.com/it/u=863503243,1550253516&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800");
        background-size: cover;
    }
</style>

<body class="bg-primary">
 <!-- 布局容器 -->
<div id="layoutAuthentication">
     <!-- 内容区域 -->
    <div id="layoutAuthentication_content">
        <main>
            <div class="container">
                 <!-- 水平居中对齐 -->
                <div class="row justify-content-center">
                      <!-- 大屏幕下占5列宽度的卡片容器 -->
                    <div class="col-lg-5">
                        <div class="card shadow-lg border-0 rounded-lg mt-5">
                            <div class="card-header"><h3 class="text-center font-weight-light my-4">欢迎登录</h3></div>
                            <div class="card-body">
                                <!-- 显示错误信息 -->
                                {% if error %}
                                <div class="alert alert-danger" role="alert">
                                    {{ error }}
                                </div>
                                {% endif %}
                                <form action="/login" method="POST">
                                    <div class="form-floating mb-3">
                                        <input class="form-control" id="inputUsername" name="account" type="text"
                                               placeholder="请输入账户"/>
                                        <label for="inputUsername">账户</label>
                                    </div>
                                    <div class="form-floating mb-3">
                                        <input class="form-control" id="inputPassword" name="password" type="password"
                                               placeholder="请输入密码"/>
                                        <label for="inputPassword">密码</label>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between mt-4 mb-0">
                                        <button style="width: 100%;" class="btn btn-primary">登录
                                        </button>
                                    </div>
                                </form>
                            </div>
                            <div class="card-footer text-center py-3">
                                <div class="small"><a href="/register">还没有账号? 注册!</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
</body>
</html>